import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {ScrollView, View} from '@tarojs/components'
import {ComponentClass} from 'react'
import './screen.scss'
import {http} from "../../utils/http";
import {MOVIE_CITY, MOVIE_REGIONS} from "../../constants/api";
import {debounce} from "../../utils/tools";

class Screen extends Component {
  state: {
    city: string
    other: number
    check: number
    regionList: any
  } = {
    city: '全城',
    other: 0,
    check: 0,
    regionList: []
  }
  static propTypes = {}

  async componentDidMount() {
    const city = await this.getcity()
    if (city) {
      this.setState({
        regionList: city
      })
    }
  }

  async componentDidUpdate() {
    const location = Taro.getStorageSync("Mlocation") || {region_id: 2, area_name: '未知'};
    const {regionList} = this.state;
    if (regionList && regionList.length > 0 && location) {
      const parent_address_id = regionList[0].parent_address_id;
      const choose_address_id = location.region_id;
      //如果不相等，要更新regionList
      if (choose_address_id !== parent_address_id) {
        debounce(async()=>{
          const city = await this.getcity()
          if (city) {
            this.setState({
              regionList: city
            })
          }
        },3000)
      }
    }
  }

  async componentDidShow() {
    this.setState({check: this.props.check})
    if (!this.props.regionId) {
      if (this.state.check == 0) {
        this.setState({
          city: '全城',
          other: 0
        })
      }
      const city = await this.getcity()
      if (city) {
        this.setState({
          regionList: city
        })
      }
    }

  }

  async getcity() {
    const location = Taro.getStorageSync("Mlocation") || {region_id: 2, area_name: '未知'};
    if (location.region_id == 2 || !location.region_id) {
      const ret = await http.MGet(MOVIE_CITY, {})
      let val = {}
      const str = Taro.getStorageSync('city').area_name
      ret.map(item => {
        if (str.indexOf(item.city_name) > -1) {
          val = {region_id: item.city_id, area_name: item.city_name}
        }
      })
      if (val.region_id) {
        location.region_id = val.region_id
      }
    }
    return await http.MGet(MOVIE_REGIONS, {cityId: location.region_id})
  }

  open(check) {
    if (check == this.state.check) {
      this.setState({check: 0})
    } else {
      const searchBarTop = this.props.searchBarTop
      if (process.env.TARO_ENV === "h5") {
        const a = document.getElementsByClassName('screenBox')
        Taro.pageScrollTo({
          duration: 300,
          scrollTop: a[0].offsetTop - searchBarTop
        })
      } else {
        const query = Taro.createSelectorQuery();
        query.selectViewport().scrollOffset();
        query.select('#screen').boundingClientRect();
        query.exec(res => {
          Taro.pageScrollTo({
            duration: 300,
            scrollTop: res[0].scrollTop + res[1].top + 2 - searchBarTop
          })
        })
      }
      this.setState({check})
    }
  }

  off() {
    this.setState({check: 0})
  }

  checkCity(city) {
    const that = this
    this.setState({
      city: city ? city.address_name : '全城', check: 0
    }, () => {
      that.props.onOther(city.address_id)
    })
  }

  checkOther(other) {
    const that = this
    this.setState({
      other, check: 0
    }, () => {
      that.props.onCOther(other)
    })
  }

  render() {
    const {city, other, check, regionList} = this.state
    return (
      <View className='screenBox'>
        <View className='screen__top' style={this.props.borderColor ? `border-color:${this.props.borderColor};` : ''}>
          <View className={check == 1 ? "screen__city on" : "screen__city"}
            onClick={this.open.bind(this, 1)}
          >{city}</View>
          <View className='shu' />
          <View className={check == 2 ? "screen__other on" : "screen__other"}
            onClick={this.open.bind(this, 2)}
          >{other ? "价格低" : "距离近"}</View>
        </View>
        {check != 0 && <View className='screen__bj' onClick={this.off.bind(this)} />}
        {check == 1 && <View className='screen__list' style='height:50vh'>
          <ScrollView scroll-y='true' style='height: 100%;'>
            <View className='screen__item' onClick={this.checkCity.bind(this, 0)}>
              全城
            </View>
            {!!regionList && regionList.length && regionList.map((item, index) =>
              <View className='screen__item' key={index} onClick={this.checkCity.bind(this, item)}>
                {item.address_name}
              </View>
            )}
          </ScrollView>
        </View>}
        {check == 2 && <View className='screen__list'>
          <View className='screen__item' onClick={this.checkOther.bind(this, 0)}>
            距离近
          </View>
          <View className='screen__item' onClick={this.checkOther.bind(this, 1)}>
            价格低
          </View>
        </View>}
      </View>
    )
  }
}

export default Screen as ComponentClass

